<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加申请项' : '修改申请项' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<a-form-item label="名称">
						<a-input v-decorator="['Name', { rules: [{ required: true, message: '请输入名称' }] }]" />
					</a-form-item>
					<a-form-item label="团队申请类型 ">
						<a-select :allowClear="true"
							v-decorator="['TeamApplyType', { rules: [{ required: true, message: '请选择实践类型' }] }]"
							placeholder="全部" optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in CommonData1" :key="item.ID" :value="item.Key">
								{{item.Value}}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="是否为结项" prop="IsClose">
						<a-radio-group @change="radioChange"
							v-decorator="['IsClose', { rules: [{ required: true, message: '是否为结项' }] }]"
							name="radioGroup">
							<a-radio :value="true">是</a-radio>
							<a-radio :value="false">否</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="是否为全员得分" prop="IsAll" v-if="!form.getFieldValue('IsClose')">
						<a-radio-group 
							v-decorator="['IsAll', { rules: [{ required: true, message: '是否为全员得分' }] }]"
							name="radioGroup">
							<a-radio :value="true">是</a-radio>
							<a-radio :value="false">否</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item label="分值" v-if="!form.getFieldValue('IsClose')">
						<a-input type="number"
							v-decorator="['Score', { rules: [{ required: true, message: '请输入分值' }] }]" />
					</a-form-item>
					<a-form-item label="课程分类"  v-if="!form.getFieldValue('IsClose')">
						<a-tree-select :allowClear="true" show-search
							v-decorator="['TypeID', { rules: [{ required: true, message: '请选择课程类型' }] }]"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							:tree-data="ActivityTypeApplyList" tree-default-expand-all :replace-fields="replaceFields"
							placeholder="请先选择课程类型"></a-tree-select>
					</a-form-item>
				
					<a-form-item label="申请角色 ">
						<a-select :allowClear="true"
							v-decorator="['ApplyRole', { rules: [{ required: true, message: '请选择申请角色' }] }]"
							placeholder="全部" optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in CommonData2" :key="item.ID" :value="item.Key">
								{{item.Value}}
							</a-select-option>
						</a-select>
					</a-form-item>


					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">
							{{JSON.stringify(text) == '{}'?'新增':'确认修改'}}
						</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import {
		ManagePracticeSessionDeclareDoAdd,
		ManagePracticeSessionDeclareDoUpdate,
		UserCreditApplyTeacherDoUpdate,
		CommonDoGetActivityTypeScoreList,
		GetActivityTypePrizeListCommon,
		ManageCreditApplyDoGetDetail,
		GetActivityTypeList,
		CommonDoGetActivityTypePrizeTypeList,
		DoGetActivityMemberTypeListCommon,
		CommonDoGetActivityTypePrizeList,
		UserCreditApplyDoGetFormList,
		UserCreditApplyDoGetNowSession,
		CommonDoGetPracticeSessionDeclareTeamApplyTypeList,
		CommonDoGetPracticeSessionDeclareApplyRoleList
	} from '@/api/follow';
	export default {
		props: {
			text: Object,

			// ActivityTypePrizeTypeList: Array,
			// ActivityMemberTypeList: Array
		},
		watch: {
			text: function(text) {
				// console.log(this.ActivityTypeData);
				this.getOtherList();
				let that = this;
				if (JSON.stringify(text) == '{}') {
					that.currentID = ''
				} else {
					that.currentID = text.ID;
					this.$nextTick(() => {
						setTimeout(function() {
							that.form.setFieldsValue({
								Name: text.Name,
								ApplyRole: text.ApplyRole,
								IsClose: text.IsClose,
								TeamApplyType: text.TeamApplyType,
								TypeID: text.TypeID,
								Score: text.Score,
								IsClose: text.IsClose,
								IsAll:text.IsAll
							});
						}, 300);
					})

				}
			}
		},
		data() {
			return {
				CommonData2: [],
				CommonData1: [],
				defaultFileList: [],
				requestUrl: this.global.requestUrl,
				icofileList: [],
				fileList: {},
				replaceFields: {
					children: 'children',
					title: 'title',
					key: 'ID',
					value: 'ID'
				},
				treeselect: true,
				ActivityTypeApplyList: [],
				ActivityTypeApplyID: [],
				itemData: [],
				rules: {},
				Type: '1',
				TypeData: [{
						Key: '1',
						Value: "参加活动"
					},
					{
						Key: '2',
						Value: "获奖"
					}
				],
				ActivityTypeData: [],
				ActivityMemberTypeList: [],
				ActivityTypePrizeTypeList: [],
				// ActivityTypePrizeTypeList:[],
				GetActivityTypePrizeListCommon: [],
				ActivityTypeScoreList: [],
				dataForm: [],
				loading: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				currentID: '',
				UserList: [],
				OldActivityTypeApplyList: [],
				zhouqi: {
					ApplyEndTime: "",
					ApplyStartTime: ''

				},
				jibieDetail: {},
				leaveChange: []
			};
		},
		created() {

			this.$nextTick(() => {
				this.form.setFieldsValue({
					Type: '1'
				});
			})

		},
		methods: {
			async radioChange(e) {
				console.log(e);
				this.$nextTick(() => {
					this.form.setFieldsValue({
						ApplyRole: ''
					});
				})
				
				if (e.target.value) {
					this.CommonData2=this.CommonData2.filter((num) => {
						return num.Key== 1;
					});
				} else {
					let res6 = await CommonDoGetPracticeSessionDeclareApplyRoleList();
					this.CommonData2 = res6.data.data
				}
			},
			ChangData(e) {
				console.log(e);
			},
			levalChange(e) {
				// console.log('ss');
				// console.log(this.ActivityTypePrizeTypeList.filter((m, i) => m.ID == e))
				this.leaveChange = this.ActivityTypePrizeTypeList.filter((m, i) => m.ID == e)
			},
			changClass(e) {
				// console.log(e);
				// console.log(this.ActivityTypeScoreList);
				console.log(this.ActivityTypeScoreList.filter((m, i) => m.ID == e)[0]);
				this.jibieDetail = this.ActivityTypeScoreList.filter((m, i) => m.ID == e)[0]
			},
			ActivityTypeApplyFun(e) {
				if (e) {
					console.log(e);
					this.getScore(e);
					this.getJiang(e);
					this.getformData(e);
					console.log(this.OldActivityTypeApplyList);
					// this.form.setFieldsValue({ TypeItemID: '' });
					// this.IsHour = this.OldActivityTypeApplyList.filter((m, i) => m.ID == e)[0].IsHour;
					this.ActivityTypeID = this.OldActivityTypeApplyList.filter((m, i) => m.ID == e)[0].ID;
					this.jibieData = this.OldActivityTypeApplyList.filter((m, i) => m.ID == e)[0]
					console.log(this.ActivityTypeID)
					if (this.OldActivityTypeApplyList.filter((m, i) => m.ID == e)[0].ItemCount > 0) {
						this.itemDataShow = true
						this.itemData = this.OldActivityTypeApplyList.filter((m, i) => m.ID == e)[0].itemData
					} else {
						this.itemDataShow = false
					}
				}
			},
			Typechang(e) {
				this.Type = e.target.value;
				console.log(this.Type);
				this.form.resetFields();
			},
			toTree(data) {
				let result = [];
				let map = {};
				if (!Array.isArray(data)) {
					return [];
				}
				data.forEach(item => {
					map[item.ID] = item;
				});
				data.forEach(item => {
					let parent = map[item.ParentID];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			},
			cancel() {},
			async getOtherList() {

				let res3 = await GetActivityTypeList()
				this.ActivityTypeData = res3.data.data
				console.log(this.ActivityTypeData);
				this.OldActivityTypeApplyList = this.ActivityTypeData;
				this.ActivityTypeApplyList = this.ActivityTypeData
				this.ActivityTypeApplyList = this.ActivityTypeApplyList.map(item => {
					return {
						...item,
						title: item.Name,
						// disabled: item.IsApply ? false : true
					};
				});
				this.ActivityTypeApplyList = this.toTree(this.ActivityTypeApplyList);
				let res5 = await CommonDoGetPracticeSessionDeclareTeamApplyTypeList();
				this.CommonData1 = res5.data.data;
				let res6 = await CommonDoGetPracticeSessionDeclareApplyRoleList();
				this.CommonData2 = res6.data.data

			},
			icohandleChange({
				fileList
			}, name) {
				this.icofileList = fileList;
			},
			async getformData(key) {
				let data = {};
				data.activityTypeID = key
				let res = await UserCreditApplyDoGetFormList(data)
				this.dataForm = res.data.data
			},
			async getScore(key) {
				let data = {};
				data.activityTypeID = key
				let res4 = await CommonDoGetActivityTypeScoreList(data);
				this.ActivityTypeScoreList = res4.data.data;
			},
			async getJiang(key, type) {
				let data = {};
				data.activityTypeID = key
				let res = await CommonDoGetActivityTypePrizeList(data);
				this.ActivityTypePrizeTypeList = res.data.data
				if (type == 2) {
					this.leaveChange = res.data.data;
				}
			},
			selectChange(e) {
				this.getScore(e);
				this.getJiang(e);
				this.getformData(e);
			},
			async getDetail(id) {
				let data = {};
				data.id = id
				let res = await ManageCreditApplyDoGetDetail(data);
				this.DetailData = res.data.data;
				this.dataForm = res.data.formData;
				let fileArr = []
				fileArr = res.data.fileData
				for (let i = 0; i < fileArr.length; i++) {
					this.icofileList.push({
						uid: i,
						name: fileArr[i].FileName,
						status: 'done',
						url: this.requestUrl + fileArr[i].FilePath
					})
				}

				let that = this;
				// this.$nextTick(() => {
				// 	setTimeout(function() {
				// 		that.form.setFieldsValue({
				// 			GetTimeData: that.moment(res.data.data.GetTime, 'YYYY-MM-DD'),
				// 		});
				// 	}, 300);
				// })
				setTimeout(function() {
					let list = res.data.formData;
					for (var i = 0; i < list.length; i++) {
						if (list[i].FieldType == 8) {
							that.form.setFieldsValue({
								[list[i].ID]: list[i].Value.indexOf('2020-10-10') > -1 ? list[i]
									.Value : '2020-10-10 ' + list[i].Value
							});
						} else {
							that.form.setFieldsValue({
								[list[i].ID]: list[i].Value
							});
						}
						if (list[i].FieldType == 5 || list[i].FieldType == 6) {
							that.fileList = Object.assign(that.fileList, {
								[list[i].ID]: []
							});
						}
					}
					for (let i in that.fileList) {
						for (let n = 0; n < list.length; n++) {
							if (list[n].ID == i) {
								let arr = list[n].Value.split(',');
								for (let m = 0; m < arr.length; m++) {
									if (arr[m]) {
										that.fileList[i].push({
											uid: m,
											url: that.requestUrl + arr[m].split('|')[1],
											name: arr[m].split('|')[0],
											status: 'done'
										});
									}
								}
							}
						}
					}
				}, 500);
			},

			moment,
			closeFunction(data) {
				this.form.resetFields();
				this.$emit('closeFun', data);
			},
			isAssetTypeAnImage(ext) {
				return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].
				indexOf(ext.toLowerCase()) !== -1;
			},
			handleSubmit(e) {
				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = {};
						data = values;
						data.SessionID = this.$route.query.ID;
						let res = {};
						if (!this.currentID) {
							res = await ManagePracticeSessionDeclareDoAdd(data);
						} else {
							data.id = this.currentID;
							res = await ManagePracticeSessionDeclareDoUpdate(data);
						}
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							this.closeFunction('1');
						} else {
							this.$message.error(res.data.msg);
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}

	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker {
		width: 100% !important;
	}

	.ant-upload-list-picture-card-container {
		width: 80px;
		height: 80px;
	}

	.zhouqiBen {
		font-size: 12px;
		padding-left: 60px;

	}

	.red {
		color: red;
	}

	.green {
		color: green;
	}
</style>
